<template>
  <div>
    <home></home>

    <h2>app{{counter}}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { provide ,ref ,readonly} from "vue";
import Home from "@/06_Provide和inject/Home";
export default {
  components:{
    Home
  },
  //使用readonly可以使得子组件不能 修改父组件的值
  setup(){
    const name = "wmy";
    let counter = ref(110);
    //导出
    provide("name",readonly(name));
    provide("counter",readonly(counter));

    const increment = () => {
      //用了ref 记得要 .value
      counter.value++;
    }
    return{
      increment,
      counter
    }
  }
}
</script>

<style scoped>

</style>